	<template>
	<div class="orderlist">

		<view class="weui-tab">
			<view class="weui-navbar fixed">
				<block v-for="(item,index) in tabs" class='navr'>
					<view :id="index" class="weui-navbar__item " :class="activeIndex == index ? 'weui-bar__item_on' : ''" @click="tabClick">
						<view class="weui-navbar__title">{{item}}</view>
					</view>
				</block>
				<view class="weui-navbar__slider" :style="'left: '+sliderLeft+'px; transform: translateX('+sliderOffset+'px);'"></view>
			</view>

			<view class="weui-tab__panel">
				<view class="weui-tab__content" v-if="activeIndex == 0">

					<scroll-view scroll-y="true" @scrolltolower="scrollLoading" class='scrollarea'>
						<div>

							<view class="weui-cells weui-cells_after-title marginb" v-for="i in orderlist" @click="query(i)">
								<view class="weui-cell">
									<view class="weui-cell__hd">
										<image :src="'https://tp5.blver.cn'+i.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
									</view>
									<div>
										<view class="weui-cell__bd">{{i.goods_title}}</view>
										<view class="weui-cell__bd price">{{i.selling_price}}</view>
									</div>
									<view class="weui-cell__ft">×{{i.number}}</view>
								</view>

								<div v-if="i.status==0" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>删除订单</span> </div>

								</div>
								<div v-else-if="i.status==1" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>取消订单</span> </div>
									
								</div>
								<div v-else-if="i.status==2" class="control">
									<p class="info">服务中</p>
									
								</div>
								<div v-else-if="i.status==7" class="control">
									<p class="info">退款中</p>
									
								</div>
								<div v-else-if="i.status==5" class="control">
									<p class="info">订单已完成</p>

								</div>
								<div v-else-if="i.status==6" class="control">
									<p>订单已退款</p>

								</div>
							</view>
						</div>
					</scroll-view>

				</view>

				<view class="weui-tab__content" v-if="activeIndex == 1">

					<scroll-view scroll-y="true" @scrolltolower="scrollLoading2" class='scrollarea'>
						<div>

							<view class="weui-cells weui-cells_after-title marginb" v-for="i in nopay" @click="query(i)">
								<view class="weui-cell">
									<view class="weui-cell__hd">
										<image :src="'https://tp5.blver.cn'+i.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
									</view>
									<div>
										<view class="weui-cell__bd">{{i.goods_title}}</view>
										<view class="weui-cell__bd price">{{i.selling_price}}</view>
									</div>
									<view class="weui-cell__ft">×{{i.number}}</view>
								</view>

								<div v-if="i.status==0" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>删除订单</span> </div>

								</div>
								<div v-else-if="i.status==1" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>取消订单</span> </div>
									
								</div>
								<div v-else-if="i.status==2" class="control">
									<p class="info">服务中</p>
								
								</div>
								<div v-else-if="i.status==5" class="control">
									<p class="info">订单已完成</p>

								</div>
								<div v-else-if="i.status==6" class="control">
									<p>订单已退款</p>

								</div>
							</view>
						</div>
					</scroll-view>

				</view>

				<view class="weui-tab__content" v-if="activeIndex == 2">

					<scroll-view scroll-y="true" @scrolltolower="scrollLoading3" class='scrollarea'>
						<div>

							<view class="weui-cells weui-cells_after-title marginb" v-for="i in servering" @click="query(i)">
								<view class="weui-cell">
									<view class="weui-cell__hd">
										<image :src="'https://tp5.blver.cn'+i.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
									</view>
									<div>
										<view class="weui-cell__bd">{{i.goods_title}}</view>
										<view class="weui-cell__bd price">{{i.selling_price}}</view>
									</div>
									<view class="weui-cell__ft">×{{i.number}}</view>
								</view>

								<div v-if="i.status==0" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>删除订单</span> </div>

								</div>
								<div v-else-if="i.status==1" class="control">
									<div class="controlitem cancelor" @click="cancelor(i.id)"><span>取消订单</span> </div>
									
								</div>
								<div v-else-if="i.status==2" class="control">
									<p class="info">服务中</p>
									
								</div>
								<div v-else-if="i.status==5" class="control">
									<p class="info">订单已完成</p>

								</div>
								<div v-else-if="i.status==6" class="control">
									<p>订单已退款</p>

								</div>
							</view>
						</div>
					</scroll-view>

				</view>

				<view class="weui-tab__content" v-if="activeIndex == 3">

					<scroll-view scroll-y="true" @scrolltolower="scrollLoading4" class='scrollarea'>
						<div>

							<view class="weui-cells weui-cells_after-title marginb" v-for="i in complete" @click="query(i)">
								<view class="weui-cell">
									<view class="weui-cell__hd">
										<image :src="'https://tp5.blver.cn'+i.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
									</view>
									<div>
										<view class="weui-cell__bd">{{i.goods_title}}</view>
										<view class="weui-cell__bd price">{{i.selling_price}}</view>
									</div>
									<view class="weui-cell__ft">×{{i.number}}</view>
								</view>

								
								
								
								<div  class="control">
									<p class="info">订单已完成</p>
	<div class="controlitem cancelor" @click.stop="subcomment(i.order_no)"><span>提交评论</span> </div>
								
								</div>
								
							</view>
						</div>
					</scroll-view>

				</view>
			</view>

		</view>
		<view class="abnor" v-if="isshowempty">
			<view class="abnor__box">
				<image class="abnor__image" mode="widthFix" src="https://s10.mogucdn.com/p2/161213/upload_74hhee883cbf190e3di6cljk23679_514x260.png" style="height: 110.778px;">
				</image>
				<view class="abnor__text">您还没有订单哦！~</view>

			</view>
		</view>
	</div>
</template>

<script>
	import { requests } from "../../../static/js/network"
	export default {
		data() {
			return {
				orderlist: [],
				nopay: [],
				servering: [],
				complete: [],
				isshowempty: false,
				page: 1,
				noscroll: true,

				tabs: ["全部", "已退款", "服务中", "已完成"],
				activeIndex: 0,
				sliderOffset: 0,
				sliderLeft: 0,

			}
		},
		onLoad(){
			let self = this
				this.noscroll = true
				this.page = 1
			requests({
					url: 'https://tp5.blver.cn/api/wechat/listorder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 5,

						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.data.length == 0) {
							self.isshowempty = true
						} else {
							self.isshowempty = false
							self.orderlist = res.data.data
						}

					}
				})
		},
		methods: {
			subcomment(oid){
				requests({
					url: 'https://tp5.blver.cn/api/wechat/testpinglun',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						orderno: oid,
					
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.status == 'success') {
							wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
								url: "/pages/subcommon/main?oid=" + oid
							})
						} else if(res.data.status == 'error') {
							wx.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}

					}
				})
			},
			tabClick(e) {
				let self = this
				this.noscroll = true
				this.page = 1
				
				this.sliderOffset = e.currentTarget.offsetLeft,
				this.activeIndex = e.currentTarget.id
				
				if(this.activeIndex==0){
					requests({
					url: 'https://tp5.blver.cn/api/wechat/listorder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 5,

						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.data.length == 0) {
							self.isshowempty = true
						} else {
							self.isshowempty = false
							self.orderlist = res.data.data
						}

					}
				})
				}else if(this.activeIndex==1){
					requests({
					url: 'https://tp5.blver.cn/api/wechat/listorder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 5,
						status: 6,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.data.length == 0) {
							self.isshowempty = true
						} else {
							self.isshowempty = false
							self.nopay = res.data.data
						}

					}
				})
				}else if(this.activeIndex==2){
					requests({
					url: 'https://tp5.blver.cn/api/wechat/listorder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 5,
						status: 2,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.data.length == 0) {
							self.isshowempty = true
						} else {
							self.isshowempty = false
							self.servering = res.data.data
						}

					}
				})

				}else if(this.activeIndex==3){
					requests({
					url: 'https://tp5.blver.cn/api/wechat/listorder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 5,
						status: 5,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						if(res.data.data.length == 0) {
							self.isshowempty = true
						} else {
							self.isshowempty = false
							self.complete = res.data.data
						}

					}
				})
				}
					
				
				
			},
			
			query(obj) {
				console.log(obj.id)
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/orderdetail/main?id=" + obj.order_no
				})
			},
			
			scrollLoading() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/listorder`,
					method: "POST",
					data: {
						page: self.page,
						each: 5,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.orderlist.concat(res2.data.data)
						self.orderlist = newarr
					}
				})

			},
			scrollLoading2() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/listorder`,
					method: "POST",
					data: {
						page: self.page,
						each: 5,
						status: 1,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.nopay.concat(res2.data.data)
						self.nopay = newarr
					}
				})

			},
			scrollLoading3() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/listorder`,
					method: "POST",
					data: {
						page: self.page,
						each: 5,
						status: 2,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.servering.concat(res2.data.data)
						self.servering = newarr
					}
				})

			},
			scrollLoading4() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/listorder`,
					method: "POST",
					data: {
						page: self.page,
						each: 5,
						status: 5,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.complete.concat(res2.data.data)
						self.complete = newarr
					}
				})

			},
		}
	}
</script>

<style scoped>
	.info {
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.scrollarea {
		height: 100vh;
	}
	
	.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		background: #fff;
	}
	
	.fixed .navr {
		background: #fff;
	}
	
	.weui-navbar__title {
		color: #FF5151
	}
	
	.weui-navbar__slider {
		background: #FF5151;
	}
	
	.orderlist {
		background: #D9D9D9
	}
	
	.control {
		display: flex;
		justify-content: flex-end;
		padding-right: 50rpx;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		background: #fff;
		margin-bottom: 10rpx;
		border-top: 1px solid #D9D9D9;
		align-items: center;
	}
	
	.controlitem {
		display: inline-block;
		margin-right: 10rpx;
		border-radius: 30rpx;
		padding: 3rpx 20rpx;
	}
	
	.controlitem span {
		display: block;
		padding: 5rpx 10rpx;
		font-size: 28rpx;
	}
	
	.cancelor {
		border: 1rpx solid #ccc;
	}
	
	.payor {
		background: #FE697A;
		color: #fff;
	}
	
	.weui-cell {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}
	
	.price {
		color: #EB5A5A;
	}
</style>